<template>
  <div class="dashboard-container">
    <div class="_title">首页</div>
    <!-- 用户信息 -->
    <el-card class="w-full">
      <div class="title-1">告警</div>
      <el-row>
        <el-col :span="8">
          <!-- <div id="pie1" class="flex justify-between flex-wrap" style="width: 500px;height: 400px;">
            1
          </div> -->
          <Charts style="width: 500px;height: 400px;" />
        </el-col>
        <el-col :span="16">
          <el-row>
            <el-col :span="8">
              cpu告警
            </el-col>
            <el-col :span="8">
              内存告警
            </el-col>
            <el-col :span="8">
              硬盘告警
            </el-col>
            <el-col :span="8">
              风扇告警
            </el-col>
            <el-col :span="8">
              电源告警
            </el-col>
            <el-col :span="8">
              其他告警
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <!-- 设备健康状态 -->
    <el-card class="w-full">

      <el-row class="mb-8">
        <el-col :span="8">
          <div class="title-1">设备健康状态</div>

          <div class="flex justify-between flex-wrap">
            <div class="flex items-center">
              4
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="title-1">设备连接状态</div>

          <div class="flex justify-between flex-wrap">
            <div class="flex items-center">
              4
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="title-1">厂商</div>

          <div class="flex justify-between flex-wrap">
            <div class="flex items-center">
              4
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 负载分析 -->
    <el-card class="w-full">
      <div class="title-1">负载分析</div>
      <el-row class="mb-8">
        <el-col :span="8">
          <div class="title-2">过载</div>
          <svg class="svg-icon" aria-hidden="true">
            <use xlink:href="#icon-high-load" fill="" />
          </svg>
          <div class="flex justify-between flex-wrap">
            <div class="flex items-center">
              4
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="title-2">低载</div>
          <svg class="svg-icon" aria-hidden="true">
            <use xlink:href="#icon-low-load" fill="" />
          </svg>
          <div class="flex justify-between flex-wrap">
            <div class="flex items-center">
              4
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="title-2">空闲资源</div>
          <svg class="svg-icon" aria-hidden="true">
            <use xlink:href="#icon-leisure" fill="" />
          </svg>
          <div class="flex justify-between flex-wrap">
            <div class="flex items-center">
              4
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 性能分析 -->
    <el-card class="w-full">
      <div class="title-1">性能分析<span>(过去一个月)</span></div>
      <el-row class="mb-8">
        <el-col :span="8">
          <div class="title-2">CPU利用率TOP3</div>
          <div class="flex justify-between flex-wrap">
            <div class="flex items-center">
              4
            </div>
          </div>
          <div class="flex justify-between flex-wrap">
            <div class="flex items-center">
              4
            </div>
          </div>
          <div class="flex justify-between flex-wrap">
            <div class="flex items-center">
              4
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="title-2">内存利用率TOP3</div>
          <div class="flex justify-between flex-wrap">
            <div class="flex items-center">
              4
            </div>
          </div>
          <div class="flex justify-between flex-wrap">
            <div class="flex items-center">
              4
            </div>
          </div>
          <div class="flex justify-between flex-wrap">
            <div class="flex items-center">
              4
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="title-2">硬盘利用率TOP3</div>
          <div class="flex justify-between flex-wrap">
            <div class="flex items-center">
              4
            </div>
          </div>
          <div class="flex justify-between flex-wrap">
            <div class="flex items-center">
              4
            </div>
          </div>
          <div class="flex justify-between flex-wrap">
            <div class="flex items-center">
              4
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import Charts from '@/components/Charts/PieCharts'

export default {
  name: 'Dashboard',
  components: {
    Charts
  },
  data() {
    return {
      chart: null
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      // this.chart = echarts.init(document.getElementById('pie1'));
      // this.setOptions();
    },
    setOptions() {
      this.chart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  background-color: #F5F5F5;
}

.dashboard {
  &-container {
    padding: 20px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.el-card {
  margin: 10px 0 20px;

  .title-1 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
  }

  .title-2 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
  }

  .svg-icon {
    color: #999;
    font-size: 30px;
    height: 100px;
    width: 100px;
    margin-left: -10px;
  }
}
</style>
